<h2 mat-dialog-title>{{ 'USER_PROFILES.DIALOG_TITLE' | translate }}</h2>

<mat-dialog-content>
  <!-- Create New Profile -->
  <div class="create-profile-section">
    <h3>{{ 'USER_PROFILES.CREATE_NEW_PROFILE' | translate }}</h3>
    <div class="create-profile-form">
      <mat-form-field class="profile-name-input">
        <mat-label>{{ 'USER_PROFILES.PROFILE_NAME' | translate }}</mat-label>
        <input
          matInput
          [(ngModel)]="newProfileName"
          (keydown.enter)="createProfile()"
          [placeholder]="'USER_PROFILES.PROFILE_NAME_PLACEHOLDER' | translate"
        />
      </mat-form-field>
      <button
        mat-raised-button
        color="primary"
        (click)="createProfile()"
        [disabled]="!newProfileName() || isCreating()"
      >
        <mat-icon>add</mat-icon>
        {{ 'USER_PROFILES.CREATE' | translate }}
      </button>
    </div>
  </div>

  <!-- Existing Profiles -->
  <div class="profiles-list-section">
    <h3>{{ 'USER_PROFILES.EXISTING_PROFILES' | translate }}</h3>
    <div class="profiles-list">
      @for (profile of profileService.profiles(); track profile.id) {
        <div
          class="profile-item"
          [class.active-profile]="profile.id === profileService.activeProfile()?.id"
        >
          @if (editingProfileId() === profile.id) {
            <!-- Edit Mode -->
            <mat-form-field class="profile-name-edit">
              <input
                matInput
                [(ngModel)]="editingProfileName"
                (keydown.enter)="saveEdit(profile.id)"
                (keydown.escape)="cancelEdit()"
              />
            </mat-form-field>
            <div class="profile-actions">
              <button
                mat-icon-button
                (click)="saveEdit(profile.id)"
                [matTooltip]="'USER_PROFILES.SAVE' | translate"
              >
                <mat-icon>check</mat-icon>
              </button>
              <button
                mat-icon-button
                (click)="cancelEdit()"
                [matTooltip]="'USER_PROFILES.CANCEL' | translate"
              >
                <mat-icon>close</mat-icon>
              </button>
            </div>
          } @else {
            <!-- View Mode -->
            <div class="profile-info-section">
              <div class="profile-name">
                <strong>{{ profile.name }}</strong>
                @if (profile.id === profileService.activeProfile()?.id) {
                  <span class="active-badge">{{
                    'USER_PROFILES.ACTIVE' | translate
                  }}</span>
                }
              </div>
              <div class="profile-meta">
                {{ 'USER_PROFILES.CREATED' | translate }}
                {{ profile.createdAt | date: 'medium' }}
              </div>
            </div>
            <div class="profile-actions">
              <button
                mat-icon-button
                (click)="startEdit(profile)"
                [matTooltip]="'USER_PROFILES.RENAME' | translate"
                [disabled]="profileService.profiles().length === 1"
              >
                <mat-icon>edit</mat-icon>
              </button>
              <button
                mat-icon-button
                (click)="exportProfile(profile)"
                [matTooltip]="'USER_PROFILES.EXPORT_PROFILE' | translate"
              >
                <mat-icon>download</mat-icon>
              </button>
              <button
                mat-icon-button
                (click)="deleteProfile(profile)"
                [matTooltip]="'USER_PROFILES.DELETE_PROFILE' | translate"
                [disabled]="
                  profile.id === profileService.activeProfile()?.id ||
                  profileService.profiles().length === 1
                "
                color="warn"
              >
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          }
        </div>
      }
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button
    mat-button
    (click)="close()"
  >
    {{ 'USER_PROFILES.CLOSE' | translate }}
  </button>
</mat-dialog-actions>
